<template>
  <div class="container_box">
    <HeaderBox></HeaderBox>
    <!-- 固定顶部栏 -->
    <div class="header_title-bar" v-if="isSticky">
      <div class="warpper_box bar">
        <div class="item">九江旅游攻略</div>
        <div class="subTilt">畅游九江，感受最美古文化气息</div>
      </div>
    </div>
    <div class="stratefy_box warpper_box">
      <div class="top">
        <h3>江西庐山自驾游手册</h3>
        <div class="subtitle">
          <span>九江神州国际旅行社有限公司</span>|
          <span>发布于2014-5-24 11:56:21</span>| <span>来源:网络</span>|
          <span>目的地: 九江</span>
        </div>
      </div>
      <div class="main">
        <h2>江西庐山自驾游手册</h2>
        <div class="main_text">
          <h6>江西庐山自驾游手册</h6>
          <p>
            都知庐山夏意迷人，孰不知庐山冬韵百媚，乘着新年瑞雪庐山归去，心旌留连，方信服了庐山人的自豪“唯我庐山，春如梦，夏如滴，秋如醉，冬如玉”。庐山，冬季你去了吗，不去避暑凉夏，去赏雪泡汤……
            庐山飘雪消息飞来，第二天打点行装去庐山，一路全程高速，昌九高速通远出口下，沿着标牌从山南公路直上庐山，驾车游庐山实在刺激，一方面庐山路实在太好了，另一方面果真“跃上葱茏四百旋”，弯道特多，所以博士开车时也格外留神，放慢了节奏前行。还好到时已不下雪，否则只有从山北才能上山，因为庐山大雪期间实行上下山车辆单行线，北山上，南山下，在南北入口处有车辆防滑链条免费提供。
          </p>
          <p>
            跃上白茫山际，天上街市迷蒙如梦，暮色下的雪峰俊美依旧，空气新鲜得沁人心扉，被苍翠清凉的山峰包围着，只想大声呐喊。走在雪映着月光，树影映着人影，贴在雪地里像清晰的雕刻，树色中露着点点灯光，别墅的屋顶白耀反光，“别墅雪景”显示出千姿百态的异域风情，有种错觉，不是在山间而是在欧洲某个小城。雾气和寒气袭来，看那窗花冰结，散发着一种温馨童话气氛。有趣的是牯岭的英译文Kuling从英语Cooling(清凉)一词演变而来，冬日Kuling是真正Cooling，神清气朗如真空虚静，明月笼罩下的夜景又是那么闪烁神奇，庐山赏雪，不可错过夜色牯岭。
          </p>
        </div>
        <!-- 我也要发表攻略 -->
        <div class="publishStrategy changeHand">
          <i class="el-icon-edit-outline"></i>
          我也要发表攻略
        </div>
        <div class="queryQuery">
          <!-- 查看上一页 -->
          <div class="prev changeHand">
            <span>上一页:</span>
            <div class="text">畅游九江，感受最美古文化气息</div>
          </div>
          <!-- 查看下一页 -->
          <div class="next changeHand">
            <span>下一页:</span>
            <div class="text">婺源旅游攻略－教你怎么玩</div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import HeaderBox from "../components/HeaderBox.vue";
import Footer from "../components/Footer.vue";
export default {
  props: {},
  components: { HeaderBox, Footer },
  data() {
    return {
      isSticky: false, // 是否固定头部
    };
  },
  methods: {
    // 滚动时,固定标题
    getScrollParase() {
      //   console.log(123);
      if (document.documentElement.scrollTop > 200) {
        this.isSticky = true;
      } else {
        this.isSticky = false;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.getScrollParase);
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.header_title-bar {
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  box-shadow: 1px 2px 30px rgba(182, 180, 180, 0.3);
  .bar {
    height: 100%;
    display: flex;
    align-items: center;

    .item {
      padding-right: 40px;
      border-right: 3px dashed #666;
      color: #00a9f7;
      font-size: 18px;
    }
    .subTilt {
      padding-left: 20px;
      color: #666;
      font-size: 18px;
    }
  }
}
.stratefy_box {
  margin: 10px auto;
  .top {
    font-size: 24px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ddd;
    padding: 0 30px;
    border: 1px solid #ddd;
    h3 {
      font-weight: 400;
      height: 120px;
      font-size: 40px;
      line-height: 120px;
    }
    .subtitle {
      display: flex;
      align-items: center;
      span {
        font-size: 12px;
        margin: 0 15px;
        color: #555;
      }
    }
  }
  .main {
    padding: 80px 30px 10px;
    border: 1px solid #ddd;
    border-top: none;
    h2 {
      font-size: 26px;
      font-weight: 400;
    }
    .main_text {
      h6 {
        text-align: center;
        color: #d52b6f;
        margin: 10px 0;
      }
    }
    .publishStrategy {
      width: 240px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      background-color: #00a9f7;
      color: #fff;
      margin: 30px auto;
      font-size: 18px;
      i {
        font-size: 26px;
        margin-right: 20px;
      }
    }
    .queryQuery {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .prev,
      .next {
        display: flex;
        align-items: center;
        font-size: 12px;
        &:hover .text {
          color: #00a9f7;
        }
        span {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
